<div class="apes-loss-assessment">

  <!--外协分析-->
  <apes-card apesTitle="车险转定损统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="carInsuranceModel" [fields]="carInsuranceField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshCarInsuranceData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'carInsuranceBar'" [data]="carInsuranceBarData" [option]="carInsuranceBarOption"
                     [loading]="carInsuranceBarLoading"></apes-charts>
      </div>

    </div>

    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="12">

                <apes-table #carInsuranceTable
                            apesBordered
                            apesSize="small"
                            [apesScroll]="{ y: '500px' }"
                            [apesFrontPagination]="false"
                            [apesShowPagination]="false"
                            [apesLoading]="carInsuranceFormLoading"
                            [apesData]="carInsuranceFormData">
                  <thead>
                  <tr>
                    <th style='width: 10%' [apesAlign]="'center'">统计时间</th>
                    <th style='width: 30%' [apesAlign]="'center'">保险公司</th>
                    <th style='width: 10%' [apesAlign]="'center'">报案单数</th>
                    <th style='width: 10%' [apesAlign]="'center'">转定损单数</th>
                    <th style='width: 10%' [apesAlign]="'center'">商务跟进</th>
                    <th style='width: 10%' [apesAlign]="'center'">门店跟进</th>
                    <th style='width: 10%' [apesAlign]="'center'">终止单数</th>
                    <th style='width: 10%' [apesAlign]="'center'">转定损比率</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let data of carInsuranceTable.data">
                    <td style='width: 10%' [apesAlign]="'center'">{{data.STATISTIC_DATE}}</td>
                    <td style='width: 30%' [apesAlign]="'center'">{{data.APP_CODE}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.TOTAL}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.SETTLEMENT}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.BACKSTAGE}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.STORE}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.REPEAL}}</td>
                    <td style='width: 10%' [apesAlign]="'center'">{{data.claimRate}}%</td>
                  </tr>
                  </tbody>
                </apes-table>

      </div>

    </div>

  </apes-card>

  <!--商务审计效率统计-->
  <apes-card apesTitle="商务审计效率统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="reviewModel" [fields]="reviewField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshReviewData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'review'" [data]="reviewData" [option]="reviewOption"
                     [loading]="reviewLoading"></apes-charts>
      </div>

    </div>

  </apes-card>

  <!--保险公司定损统计-->
  <apes-card apesTitle="保险公司定损统计1">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="insuranceCompanyModel" [fields]="insuranceCompanyField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshInsuranceCompanyData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'insuranceCompanyPie'" [data]="insuranceCompanyPieData" [option]="insuranceCompanyPieOption"
                     [loading]="insuranceCompanyPieLoading"></apes-charts>
      </div>

      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'insuranceCompanyBar'" [data]="insuranceCompanyBarData" [option]="insuranceCompanyBarOption"
                     [loading]="insuranceCompanyBarLoading"></apes-charts>
      </div>

    </div>

    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="12">

        <apes-table #insuranceCompanyTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="insuranceCompanyFormLoading"
                    [apesData]="insuranceCompanyFormData">
          <thead>
          <tr>
            <th style='width: 15%' [apesAlign]="'center'">统计时间</th>
            <th style='width: 15%' [apesAlign]="'center'">保险公司</th>
            <th style='width: 15%' [apesAlign]="'center'">定损收款金额</th>
            <th style='width: 15%' [apesAlign]="'center'">定损金额占比</th>
            <th style='width: 15%' [apesAlign]="'center'">成本金额</th>
            <th style='width: 12.5%' [apesAlign]="'center'">同比</th>
            <th style='width: 12.5%' [apesAlign]="'center'">环比</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of insuranceCompanyTable.data">
            <td style='width: 15%' [apesAlign]="'center'">{{data.STATISTIC_DATE}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.NAME}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.FIXED_LOSS_AMOUNT}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.AmountRatio}}%</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.PRICE_COST_UNIT_IN_TAX}}</td>
            <td style='width: 12.5%' [apesAlign]="'center'">{{data.YearOnYear}}%</td>
            <td style='width: 12.5%' [apesAlign]="'center'">{{data.ChainRatio}}%</td>
          </tr>
          </tbody>
        </apes-table>

      </div>

    </div>

  </apes-card>


</div>


